<script setup lang="ts">
  import { computed, ref } from 'vue';
  import { Spin } from '@arco-design/web-vue';

  import { querycommunity_typeModelList, queryCommunityList } from '/@/api/community_type';
  import type { TypeListResultModel, CommunityRecord } from '/@/api/model/community_typeModel';
  import { useUserStore } from '/@/store/modules/user';
  import UserModal from '/@/components/Connect/src/UserModal.vue';
  import ClubCommunity from './components/ClubCommunity.vue'


  import MyClub from './components//MyClub.vue'
  const recommendTab = ref({ name: '推荐社区', id: 0 });
  const typeList = ref<TypeListResultModel[]>([recommendTab.value]);
  const activeKey = ref(0);
  (async () => {
    const result = await querycommunity_typeModelList();
    typeList.value.push(...result);
  })();
  const communityLoading = ref(true);
  const communityList = ref<CommunityRecord[]>([]);

  const getCommunity = async (params: object) => {
    communityLoading.value = true;
    const result = await queryCommunityList(params);
    communityList.value = result;
    communityLoading.value = false;
  };



  const userStore = useUserStore();
  const userInfo = computed(() => userStore.getUserInfo);

  const visibleRef = ref(false);

  function openModal() {
    visibleRef.value = true;
  }

  const changeTabs = (key) => {
    communityList.value = [];
    if (key === 0) {
      getCommunity({ recommend: 0, user_id:userInfo.value.id });
    } else {
      getCommunity({ type_id: key, user_id:userInfo.value.id  });
    }
  };
  changeTabs(activeKey.value);
</script>

<template>
  <div class="w-full mb-[80px]">
    <div class="p-[12px] box-border">
      <div class="w-[calc(100%-80px)] flex relative mx-[40px]">
        <div class="center flex-1 center-card">
          <a-card :bordered="false" title="我的社区" class="min-h-[500px]">
            <a-empty v-if="!userInfo">
              <template #image>
                <img class="h-[180px]" src="../../assets/pins/noLogin.svg" />
              </template>
              <div class="text-[16px]">立即登录，查看我的社区</div>
              <div class="w-[100px] mr-auto ml-auto mt-[20px]">
                <a-button type="primary" long @click="openModal">登录</a-button>
              </div>
            </a-empty>
            <MyClub :id="userInfo?.id" v-else />

          </a-card>
          <a-card :bordered="false" title="社区广场" class="min-h-[300px] mt-[12px]">
            <template #extra>
              <a-input-search :style="{ width: '240px' }" placeholder="搜索圈子名称" />
            </template>
            <a-tabs type="rounded" @change="changeTabs">
              <a-tab-pane v-for="item in typeList" :key="item.id" :title="item.name" />
            </a-tabs>
            <a-row :gutter="[24, 24]" class="px-[20px]">
              <a-col :span="8"    v-for="(item, index) in communityList"      :key="index" >
                <Spin :loading="communityLoading" class="w-full">
                  <ClubCommunity
                    class="mb-[10px]"
                    :data="item"
                  />
                </Spin>
              </a-col>
            </a-row>
          </a-card>
        </div>
        <div class="rightt w-[266px] ml-[18px]">
          <a-card :bordered="false" title="人气社区" class="min-h-[500px] bold">
            <a-space>
              <img class="w-[60px] h-[60px]" />
              <div>
                <div>qqqqqq</div>
                <a-typography-text class="text-[#8A919F] text-[12px] mb-0" type="secondary" ellipsis
                  >33223</a-typography-text
                >
                <div class="text-[#8A919F] text-[12px]">111星友 · 222星点</div>
              </div>
            </a-space>
          </a-card>
        </div>
      </div>
    </div>

    <UserModal v-model:visible="visibleRef" />
  </div>
</template>
<style scoped>
  .center-card :deep(.arco-card-header) {
    border: none;
    height: 74px;
  }

  .center-card :deep(.arco-card-header-title) {
    font-size: 20px;
    font-weight: bold;
  }
</style>
